<template>
  <div class="item">
    <div
      class="video-player"
      :style="playerStyle"
    >
      <video
        ref="video"
        :src="videoData.videoUrl"
        @loadedmetadata="getVideoAspectRatio"
        :style="playerStyle"
        @mouseover="videoPlay"
        @mouseout="videoStop"
        @click.prevent="toggleFullscreen"
        muted
        controls
      ></video>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 高宽比
      videoAspectRatio: 0,
    };
  },
  props: {
    videoData: Object,
  },
  computed: {
    playerStyle() {
      return {
        width: `300px`,
        height: `${300 / this.videoAspectRatio}px`,
      };
    },
  },
  methods: {
    // 计算视频高宽比
    getVideoAspectRatio() {
      const videoElement = this.$el.querySelector("video");
      if (videoElement) {
        const videoWidth = videoElement.videoWidth;
        const videoHeight = videoElement.videoHeight;
        this.videoAspectRatio = videoWidth / videoHeight;
      }
    },

    // 鼠标移入视频自动播放
    videoPlay() {
      this.$refs.video.play();
    },

    // 鼠标移除视频停止播放
    videoStop() {
      this.$refs.video.pause();
    },

    // 单击视频
    toggleFullscreen() {
      const videoElement = this.$refs.video;
      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen();
      } else if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else if (videoElement.webkitRequestFullscreen) {
        videoElement.webkitRequestFullscreen();
      } else if (videoElement.msRequestFullscreen) {
        videoElement.msRequestFullscreen();
      }
      console.log(2);
      this.$emit("slide");
    },
  },
};
</script>

<style scoped>
</style>